<#include "../header.html">

<body>


<table id="dg" title="Users" style="width:100%;height:100%"
       toolbar="#toolbar" idField="id"
       rownumbers="true" fitColumns="true" singleSelect="false" pagination="true", pageSize="10" striped="true" queryParams="{}">
    <thead>
    <tr>
        <th field="" width="10" checkbox="true">check</th>
        <th field="id" width="20" formatter="userIdFormat">id</th>
        <th field="mobile" width="50" editor="{type:'validatebox',options:{required:true}}">mobile</th>
        <th field="username" width="50" editor="text">username</th>
        <th field="lang" width="50" editor="text" formatter="userLangFormat">language</th>
        <th field="email" width="50" editor="{type:'validatebox',options:{validType:'email'}}">Email</th>
        <th field="createTime" width="50" >create_time</th>
        <th field="status" width="50" formatter="userStatusFormat">status</th>
    </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').datagrid('addRow')">New</a>
    <button id="deleteButton" href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteUser()">Delete</button>
    <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').datagrid('saveRow')">Save</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').datagrid('cancelRow')">Cancel</a>
    <div>Query Conditions</div>
    <div>
        username <input id="username" class="easyui-textbox" style="width:150px">
        email <input id="email" class="easyui-textbox" style="width:150px">
        mobile <input id="mobile" class="easyui-textbox" style="width:150px">
    </div>
    <br>
    <div>
        CreateTime From: <input id="createFrom" class="easyui-datebox" style="width:150px" data-options="formatter:standardDateFormatter,parser:standardDateParser">
        To:              <input id="createTo" class="easyui-datebox" style="width:150px" data-options="formatter:standardDateFormatter,parser:standardDateParser">
        status:
        <select id="status" class="easyui-combobox" panelHeight="auto" style="width:100px">
            <option value="-1">--</option>
            <option value="0">normal</option>
            <option value="1">unactive</option>
            <option value="2">forbidden</option>
        </select>

    </div>
    <div>
        <a id="search" href="#" class="easyui-linkbutton" iconCls="icon-search" >Search</a>
    </div>
</div>

<div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save' " style="width:200px;height:100px;padding:10px" closed="true">
    The dialog content.
</div>




<script>
    $('#dg').datagrid({
        url: '${request.contextPath}/manage/user/userList',
//        url: '/spring/static/datagrid.json',
        method: 'get'
    });


    // 点击查询
    $("#search").click(function(){
        var queryParams = $('#dg').datagrid('options').queryParams;
        queryParams.username = $('#username').val();
        queryParams.mobile = $('#mobile').val();
        queryParams.email = $('#email').val();
        queryParams.createFrom = $('#createFrom').val();
        queryParams.createTo = $('#createTo').val();
        queryParams.status = $('#status').val();
        $('#dg').datagrid('reload');
    });

    function deleteUser(){
        $.messager.prompt('Confirm Delete', 'Please type "DELETE"', function(r){
            if (r){
                if(r == 'DELETE') {
                    var selecedRow = $('#dg').datagrid('getSelected');// 选中的行
                    $.ajax({
                        type: 'DELETE',
                        url: "${request.contextPath}/manage/user/"+selecedRow.id
                    }).success(function(){
                        alert('delete success');
                        $('#dg').datagrid('reload');
                    }).error(function(){
                        alert('delete error')
                    })
                } else {
                    $('#dlg').html('PLZ TYPE "DELETE"');
                    $('#dlg').dialog('open').dialog('setTitle','type mistake');
                }
            }
        });
    }
    // 格式化user id输出
    function userIdFormat(val,row,index){
        return '<a href="javascript:void(0)" onclick="showUserDetailTab('+val+')">'+val+'</a>';
    }

    function showUserDetailTab(userId) {
        self.parent.addTab("user detail","${request.contextPath}/manage/user/userList"+userId);
    }

</script>

</body>
<#include "../footer.html">